<style type="text/css">
{literal}
<!--
#reportGroup{
	 /* for Firefox, Opera and others: */
	 max-width: 200px; 
}

* #reportGroup{
	 /* for IE */
	 width: expression(Math.min(this.offsetWidth, 200) + "px"); 
} 
-->
{/literal}
</style>
<script src="{$base_dir}modules/report/js/AJAX_GeneralReport.js" type="text/javascript"></script>
<script type="text/javascript">
{literal}
	$(document).ready(function() {
        activeMenu('2', '98'); 
		loadReports('all');
		$('#reportGroup').change(function(){
			loadReports($(this).val());
		});
	});
{/literal}
</script>
<!-- Global buttons -->
{include file='general_report/element_global_button.html'}
<div class="separator"></div>
<div class="separator"></div>
<div id="gReportContent">
	<div class="form_container" style="width: 500px;">
		<table>
			<tr>
				<td colspan="2" class="label" style="text-transform: uppercase;">{translate}List of reports{/translate}</td>
				<td width="140" rowspan="2" valign="bottom" style="text-align: right; vertical-align: bottom;"><img src="{$base_uri}images/ajax-loader.gif" id="loading" style="display: none;"/></td>
			</tr>
			<tr>
				<td><span class="label">{translate}Select a group{/translate}</span></td>
				<td>
					<select id="reportGroup" name="reportGroup" style='min-width: 100px'> 
					{if isset($groups)}
					<option value="all" label="{translate}All{/translate}" selected="selected">{translate}All{/translate}</option>
					{html_options options=$groups}
					{/if}
					</select>
				</td>
				
			</tr>
		</table>
	</div>
	<div class="separator"></div>
	<div id="viewAllReportsContent">
	
	</div>
</div>